import getSongs from '@/actions/getSongs';
import Header from '@/components/Header';
import ListItem from '@/components/ListItem';
import PageContent from './components/PageContent';

//避免该页面被浏览器缓存
export const revalidate = 0;

export default async function Home() {
  //从supabase的数据库中获取歌曲
  const songs = await getSongs();

  return ( 
    // 除了左侧侧边栏的 中间内容区域盒子
    // 带背景渐变色的盒子
    <div className="
      bg-neutral-900
      rounded-lg
      h-full
      w-full
      overflow-hidden
      overflow-y-auto
      bg-gradient-to-b
    from-cyan-800
    ">
      {/* 顶部标题栏 左右按钮 欢迎语 收藏歌单 */}
      <Header>
        {/* 内容区域标题的文本内容 */}
        <div className="mb-2">
          <h1 className="
            text-white
            text-3xl
            font-semibold
          ">早上好！</h1>
          {/* 列表项组件划分盒子 
            * (< 640px) 显示1个； 
            * (640 - 1280px) 显示2个；
            * (1280 - 1536px) 显示3个;
            * (> 1536px) 显示4个
          */}
          <div className="
            grid
            grid-cols-1
            sm:grid-cols-2
            xl:grid-cols-3
            2xl:grid-cols-4
            gap-3
            mt-4
          ">
            <ListItem
              image="/images/liked.png"
              name="喜爱的歌曲" 
              href="liked"
            />
          </div>
        </div>
      </Header>
      {/* 内容 最近歌曲 */}
      <div className="mt-2 mb-7 px-6">
        {/* 标题 */}
        <div className='flex justify-between items-center'>
          <h1 className="text-white text-2xl font-semibold">
            最新歌曲
          </h1>
        </div>
        {/* 页面内容 */}
        <PageContent songs={songs}/>
      </div>
    </div>
  )
}
